<div class="panel_top">
	<h2 class="title" data-bind="visible: isNew(), i18n: 'text'" data-i18n="CONTACTS/LABEL_NEW_GROUP"></h2>
	<h2 class="title" data-bind="visible: !isNew(), i18n: 'text'" data-i18n="CONTACTS/LABEL_EDIT_GROUP"></h2>
</div>
<div class="decor"></div>
<div class="panel_center" data-bind="customScrollbar: {}">
	<div class="contact_content scroll-inner">
		<div class="contact_data_groups edit">
			<div class="fields clearfix">
				<div class="row">
					<span class="label">
						<span data-bind="i18n: 'text'" data-i18n="CONTACTS/LABEL_GROUP_NAME"></span>:
					</span>
					<input class="value input" type="text" data-bind="hasfocus: nameFocused, value: name, valueUpdate: 'afterkeydown', onEnter: $root.saveCommand" />
				</div>
				<div class="row"> 
					<span class="value offset"> 
						<label class="custom_checkbox" data-bind="css: {'checked': isOrganization}"> 
							<span class="icon"></span> 
							<input type="checkbox" id="isOrganization" data-bind="checked: isOrganization">
						</label>
						<label for="isOrganization" data-i18n="CONTACTS/LABEL_GROUP_ORGANIZATION" data-bind="i18n: 'text'"></label>
					</span>
				</div>				
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: 'text'" data-i18n="CONTACTS/LABEL_GROUP_EMAIL"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: email, valueUpdate: 'afterkeydown', onEnter: $root.saveCommand" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: 'text'" data-i18n="CONTACTS/LABEL_GROUP_COMPANY"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: company, valueUpdate: 'afterkeydown', onEnter: $root.saveCommand" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: 'text'" data-i18n="CONTACTS/LABEL_GROUP_COUNTRY"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: country, valueUpdate: 'afterkeydown', onEnter: $root.saveCommand" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: 'text'" data-i18n="CONTACTS/LABEL_GROUP_STATE"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: state, valueUpdate: 'afterkeydown', onEnter: $root.saveCommand" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: 'text'" data-i18n="CONTACTS/LABEL_GROUP_CITY"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: city, valueUpdate: 'afterkeydown', onEnter: $root.saveCommand" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: 'text'" data-i18n="CONTACTS/LABEL_GROUP_STREET"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: street, valueUpdate: 'afterkeydown', onEnter: $root.saveCommand" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: 'text'" data-i18n="CONTACTS/LABEL_GROUP_ZIP"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: zip, valueUpdate: 'afterkeydown', onEnter: $root.saveCommand" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: 'text'" data-i18n="CONTACTS/LABEL_GROUP_PHONE"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: phone, valueUpdate: 'afterkeydown', onEnter: $root.saveCommand" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: 'text'" data-i18n="CONTACTS/LABEL_GROUP_FAX"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: fax, valueUpdate: 'afterkeydown', onEnter: $root.saveCommand" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: 'text'" data-i18n="CONTACTS/LABEL_GROUP_WEB"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: web, valueUpdate: 'afterkeydown', onEnter: $root.saveCommand" />
				</div>
				<div class="row" data-bind="visible: isNew() && '' !== newContactsInGroupHint()">
					<span data-bind="text: newContactsInGroupHint"></span>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="panel_bottom">
	<div class="toolbar">
		<span class="content">
			<span class="item save" data-bind="command: $root.saveCommand">
				<span class="icon"></span>
				<span class="text" data-bind="i18n: 'text'" data-i18n="CONTACTS/BUTTON_SAVE_GROUP"></span>
			</span>
			<span class="item cancel" data-bind="click: function () { $root.executeCancel(); }">
				<span class="icon"></span>
				<span class="text" data-bind="i18n: 'text'" data-i18n="CONTACTS/BUTTON_CANCEL_GROUP"></span>
			</span>
		</span>
	</div>
</div>